<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image @click="fanhui" class="image1" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />违规信息
    </view>
    <scroll-view class="list" scroll-y :style="'height:calc( 100vh - ' + statusBarHeight + 'px  )'">
      <view class="li" v-for="(item, index) in list" :key="index" @click="details(item.id)">
        <view class="li_1">
          <view class="jiedao"><span class="titles">{{item.businessType==1?"举报房源":(item.businessType==2?"举报车源":(item.businessType==4?(item.reportCategory==4?"举报招聘":'举报简历'):(item.businessType==6?"举报帮友圈":"举报用户")))}}：</span>
            <span class="titless" v-if="item.businessType!=3">{{item.businessType==6?item.title|| "未命名用户"+'的帮友圈': item.title}}</span>
            <span class="titless" v-else>{{ item.remarks || "未命名用户"}}</span>
          </view>
          <view class="jiedao"><span class="titles">举报原因：</span>
            <span class="titless" v-if="item.businessType!=3">{{ item.reportType.split('|').join(',') }}({{ item.reportContent }})</span>
            <span class="titless" v-else>{{ item.reportContent }}</span>
          </view>
          <view class="jiedao"><span class="titles">举报时间：</span><span class="titless">{{ item.createDate }}</span>
          </view>
          <view class="jiedao"><span class="titles">举报图片：</span></view>
          <view class="jubaoImge">
          	<image :src="eim" v-for="(eim,index) in item.image" @click="ViewImages(item.image,index)" :key="index" mode="aspectFill"/>
          </view>
        </view>
      </view>
      <view v-if="list.length == 0" class="none">
        <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
        <view>没有更多数据了</view>
      </view>
      <view class="down" v-show="list.length != 0">没有更多了</view>
    </scroll-view>
	<uniBall></uniBall>
  </view>
</template>

<script>
  import {
    mapGetters
  } from "vuex";
  let statusBarHeight;
  //#ifdef H5
  import wxshare from "../utils/index.js";
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10;
  //#endif
  // #ifdef APP-PLUS
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10;
  //  #endif
  // #ifdef MP-WEIXIN
  statusBarHeight = 96 + 5;
  //  #endif
  export default {
    data() {
      return {
        userId: "",
        statusBarHeight,
        list: [],
		index:""
      };
    },
    onLoad(options) {
      this.userId = options.id;
      this.getData();
      /* #ifdef H5 */
      this.jinzhi();
      /* #endif */
    },
    computed: {
      ...mapGetters(["statusBarHeight1", "userinfo"])
    },
    methods: {
      fanhui() {
        uni.navigateBack({
          delta: 1
        });
      },
		ViewImages(url,index) {
			uni.previewImage({
				urls:url,
				current: url[index],
			});
		},
      getData() {
        this.upStatus = false;
        this.$myRequest
          .get("/mob/user/getReportMyRecord", {
            pageSize: 100,
            pageNo: 1,
            userId: this.userId,
          })
          .then(res => {
            res.page.list.forEach(el => {
              if (el.image) {
                el.image = el.image.split("|");
              }
            });
            this.list = this.list.concat(res.page.list);
          });
      },
      jinzhi() {
        let _this = this;
        let param = window.location.href.split("#")[0];
        uni.request({
          method: "post",
          data: {
            url: param
          },
          header: {
            "content-type": "application/x-www-form-urlencoded"
          },
          url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
          success(re) {
            _this.jinzhifx(re.data);
          }
        });
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ["hideMenuItems"]
        });
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            "menuItem:share:appMessage",
            "menuItem:share:timeline",
            "menuItem:share:timeline",
            "menuItem:share:qq",
            "menuItem:favorite",
            "menuItem:share:QZone",
            "menuItem:openWithSafari"
          ]
        });
      }
    }
  };
</script>

<style lang="less" scoped>
  .list {
    .li {
		width: 750rpx;
      // min-height: 220rpx;
      background-color: #fff;
      margin-top: 32rpx;
      border-bottom: 20rpx solid #f2f2f2;
      padding-left: 30rpx;
      padding-right: 30rpx;
      padding-bottom: 30rpx;

      p {
        display: inline-block;
        vertical-align: top;
        font-size: 32rpx;
        margin-bottom: 18rpx;
      }
    }
  }

  .box {
    width: 100%;
    background-color: #fff;
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      /* #ifdef MP-WEIXIN */
      top: 70%;
      /* #endif */
      // #ifdef APP
      top: 50%;
      // #endif
      right: 30rpx;
      z-index: 999999999;
    }
  }

  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }

  .down {
    height: 60rpx;
    line-height: 60rpx;
    // border-top: 2rpx solid #d0d0d0;
    text-align: center;
  }

  .jiedao {
    line-height: 45rpx;
    /* color: #8b8a8a; */
    display: flex;
    align-items: flex-start;
    width: 100%;

    .titles {
      color: #8b8a8a;
      width: 180rpx;
    }

    .titless {
      color: #000;
      width: calc(100% - 140rpx);
	  word-wrap: break-word;word-break: break-all;
    }
  }
  .jubaoImge{
	  display: flex;
	  width: 690rpx;
	  flex-wrap: wrap;
	  image{
		width: 200rpx;
		height:200rpx;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
	  }
  }
</style>